Example: Displaying a Deck GL Layer with Barikoi React GL

The GeoJsonLayer in this example demonstrates how to integrate Deck GL with the react-bkoi-gl package, providing a powerful way to visualize geographic data on a map. The GeoJsonLayer is designed to render GeoJSON data on top of a Barikoi map using the MapboxOverlay from Deck GL, allowing for highly customizable map layers.

By leveraging react-bkoi-gl alongside Deck GL, this example highlights the capability to create rich, layered maps with custom geo-referenced data, enhancing mapping and geospatial applications for diverse use cases such as urban planning, transportation, and location analysis.

Example

import { useEffect, useRef, useState } from "react";
import { GeoJsonLayer } from "@deck.gl/layers"; // Import DeckGL Layer
import { MapboxOverlay } from "@deck.gl/mapbox"; // Import Mapbox Overlay
import { Map, useControl } from "react-bkoi-gl"; // Import the Barikoi React GL package
import "react-bkoi-gl/styles"; // Import CSS for proper map styling

// Create DeckGL Overlay
const DeckGLOverlay = (props) => {
  const overlay = useControl(() => new MapboxOverlay(props));
  overlay.setProps(props);
  return null;
};

const App = () => {
  const BARIKOI_API_KEY = "YOUR_BARIKOI_API_KEY_HERE";
  const mapStyle = `https://map.barikoi.com/styles/osm-liberty/style.json?key=${BARIKOI_API_KEY}`;
  const mapContainer = useRef(null);
  const mapRef = useRef(null);
  const [data, setData] = useState(null);

  const initialViewState = {
    longitude: 90.36402,
    latitude: 23.823731,
    minZoom: 4,
    maxZoom: 30,
    zoom: 6,
    bearing: 0,
    pitch: 0,
    antialias: true,
  };

  useEffect(() => {
    // Fetching GeoJSON data
    fetch("/data.json")
      .then((response) => response.json())
      .then((jsonData) => setData(jsonData))
      .catch((error) => console.error("Error loading GeoJSON data:", error));
  }, []);

  const layers = new GeoJsonLayer({
    id: "GeoJsonLayer",
    data,
    stroked: false,
    filled: true,
    pointType: "circle+text",
    pickable: true,
    lineWidthScale: 3,
    lineWidthMaxPixels: 5,
    lineWidthMinPixels: 1,
    getFillColor: [160, 160, 180, 200],
    wireframe: true,
  });

  return (
    <div ref={mapContainer} style={containerStyles}>
      <Map
        ref={mapRef}
        mapStyle={mapStyle}
        style={{ width: "100%", height: "100%" }}
        initialViewState={initialViewState}
        doubleClickZoom={false}
        dragRotate={false}
        attributionControl={false}
      >
        <DeckGLOverlay layers={[layers]} />
      </Map>
    </div>
  );
};

// JSX Styles
const containerStyles = {
  width: "100%",
  height: "100vh",
  minHeight: "400px",
  overflow: "hidden",
};

export default App;

Example​

Example